{extend name="layouts:form"/}
{block name="css_common"}
{asset:css name="select2" /}
{/block}
{block name="js_common"}
{asset:js name="select2" /}
{/block}

{block name="content"}
<style>
    .images-list {
        display: flex;
        flex-wrap: wrap;
    }

    .img {
        width: 80px;
        height: 80px;
        background: #f1f1f1;
        margin-right: 5px;
        position: relative;
    }

    .upload-btn {
        width: 78px;
        height: 78px;
        border: #CFCFCF dashed 1px;
        margin-left: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .upload-btn .layui-icon {
        font-size: 30px;
    }

    .img i {
        position: absolute;
        right: -5px;
        top: -5px;
        cursor: pointer;
    }

    .img img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .btn-default {
        width: 100px !important;
    }

    .form-control2 {
        display: flex;
        flex: 1;
        height: 32px;
        border: 1px solid #CFCFCF;
        margin-right: 10px;
        background: rgba(216, 216, 216, 0.1);
        border-radius: 4px;
        align-items: center;
        padding: 0 10px;
    }

    .form-control2 .icon {
        display: none;
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

    .form-control2 span {
        color: #9B9B9B;
    }
</style>
<form class="form-horizontal m" id="form-add">
    <div class="form-group">
        <label class="col-sm-2 control-label" style="font-weight: 600;">合同设置</label>
        <div class="col-sm-8"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label is-required">合同类型</label>
        <div class="col-sm-8">
            <select name="type" class="select2" id="select2" data-width="100%">
                <option value="1">学员合同</option>
                <option value="2">合伙人合同</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label is-required">合同名称</label>
        <div class="col-sm-8">
            <input type="text" name="title" value="" class="form-control" required
                   autocomplete="off" style="text-indent: 5px;" placeholder="请输入合同名称"/>
        </div>
    </div>
    <input type="file" id="uploadInput1" style="display: none;">
    <input type="file" id="uploadInput2" style="display: none;">
    <input type="file" id="uploadInput3" style="display: none;">
    <div class="form-group">
        <label class="col-sm-2 control-label is-required">上传合同</label>
        <div class="col-sm-8">
            <div style="display: flex;justify-content: space-between;align-items: center">
                <input type="hidden" class="form-control" style="flex:1;display: inline-block;margin-right: 10px"
                       name="contract" placeholder="支持docx,pdf格式的文件(合伙人请上传docx格式)" required readonly>
                <div class="form-control2 contract">
                    <img src="/static/admin/images/word.png" class="icon">
                    <span>支持docx,pdf格式的文件(合伙人请上传docx格式)</span>
                </div>
                <button type="button" class="btn btn-default" style="background-color: #0171CF;color: white"
                        data-name="contract" onclick="$.myTool.chooseFile('contract','.docx,.pdf',null,this)">从电脑上传
                </button>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">上传预览图</label>
        <div class="col-sm-8">
            <!--            <button type="button" class="btn btn-default" style="background-color: #2b333f;color: white"-->
            <!--                    onclick="$.myTool.chooseFile('images','.png,.jpg',chooseImages)">上传预览图-->
            <!--            </button>-->
            <div style="display: flex;align-items: center;flex-wrap: wrap;">
                <div class="upload-btn" onclick="$.myTool.chooseFile('images','.png,.jpg',chooseImages.bind(this))"><i
                        class="layui-icon layui-icon-add-1"></i></div>
            </div>
        </div>
    </div>
    <div id="student">
<!--        <div class="form-group">-->
<!--            <label class="col-sm-2 control-label">上传附件</label>-->
<!--            <div class="col-sm-8">-->
<!--                <div style="display: flex;align-items: center;justify-content: space-between;">-->
<!--                    <input type="hidden" class="form-control" style="flex:1;display: inline-block;margin-right: 10px"-->
<!--                           name="attachment" placeholder="支持docx,pdf格式的文件" readonly>-->
<!--                    <div class="form-control2 attachment">-->
<!--                        &lt;!&ndash;                        <img src="/static/admin/images/xslx.png" class="icon">&ndash;&gt;-->
<!--                        <span>支持docx,pdf格式的文件</span>-->
<!--                    </div>-->
<!--                    <button type="button" class="btn btn-default" style="background-color: #0171CF;color: white"-->
<!--                            data-name="attachment" onclick="$.myTool.chooseFile('attachment','.docx,.pdf',null,this)">-->
<!--                        从电脑上传-->
<!--                    </button>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <div class="form-group" id="student_list">
            <label class="col-sm-2 control-label is-required">学员名单</label>
            <div class="col-sm-8">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <input type="hidden" class="form-control"
                           style="flex:1;display: inline-block;margin-right: 10px"
                           name="student_list" placeholder="支持xlsx格式的文件" required readonly>
                    <div class="form-control2 student_list">
                        <img src="/static/admin/images/xslx.png" class="icon">
                        <span>仅支持xlsx文件</span>
                    </div>
                    <button type="button" class="btn btn-default" style="background-color: #0171CF;color: white"
                            onclick="chooseFile('student_list','.xlsx',this)" data-name="student_list">从电脑上传
                    </button>
                </div>
            </div>
        </div>

        <div class="form-group" id="studentTable">
            <div class="col-sm-2"></div>
            <div class="col-sm-8">
                <table class="layui-table" lay-even="" lay-skin="nob"
                       style="border: 1px solid #CFCFCF;display: none;border-radius: 4px;">
                    <colgroup>
                        <col width="80">
                        <col width="100">
                        <col width="100">
                        <col width="100">
                        <col width="100">
                    </colgroup>
                    <thead>
                    <tr>
                        <th scope="col">序号</th>
                        <th scope="col">孩子姓名</th>
                        <th scope="col">家长微信</th>
                        <th scope="col">家长电话</th>
                        <th scope="col">分阶情况</th>
                    </tr>
                    </thead>
                    <tbody id="studentTbody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</form>
{/block}

{block name="script"}
<script src="/static/admin/js/xlsx.core.min.js"></script>
<script>
    $('#select2').change(function () {
        if ($(this).val() == 1) {
            $('#student').show();
            $('input[name="student_list"]').prop('required', true); // 添加required属性
        } else {
            $('#student').hide();
            $('input[name="student_list"]').prop('required', false); // 移除required属性
        }
    })

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(oasUrl, $('#form-add').serialize());
        }
    }

    function chooseImages(e) {
        $(this).before(`<div class="img">
                    <img src="{:env('TENCENT.COS_URL')}/${e}" alt="">
                    <input type="hidden" name="preview_url[]" value="${e}">
                    <i class="layui-icon layui-icon-close-fill" onclick="removeImages(this)"></i>
                </div>`)
    }

    function removeImages(e) {
        $(e).parent().remove()
    }

    function chooseFile(inputName, accept, that) {
        var input = document.createElement('input');
        input.type = 'file';
        input.accept = accept;
        input.addEventListener('change', function (e) {
            $(that).text('重新上传')
            let file = this.files[0];
            let fileNameInput = document.querySelector('input[name="' + inputName + '"]');
            fileNameInput.value = file.name;
            $(`.${inputName} span`).text(file.name)
            $(`.${inputName} .icon`).show()

            let load = layer.load(1)
            let fileReader = new FileReader();
            fileReader.onload = function (ev) {
                try {
                    var data = ev.target.result,
                        workbook = XLSX.read(data, {
                            type: 'binary'
                        }), // 以二进制流方式读取得到整份excel表格对象
                        XlsxPersons = []; // 存储获取到的数据
                } catch (e) {
                    console.log('文件类型不正确');
                    return;
                }
                // 遍历每张表读取
                for (var sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        var fromTo = workbook.Sheets[sheet]['!ref'];
                        console.log(fromTo);
                        var datas = workbook.Sheets[sheet];

                        // 如果有不规范数据可以在这里进行处理datas

                        XlsxPersons = XlsxPersons.concat(XLSX.utils.sheet_to_json(datas));
                        break; // 只读了第一张表
                    }
                }
                layer.close(load)
                $('.layui-table').show()
                $('#studentTbody').empty()
                for (let i = 0; i < XlsxPersons.length; i++) {
                    $('#studentTbody').append(`<tr>
                    <input type="hidden" name="students[${i}][index]" value="${XlsxPersons[i].index}">
                    <input type="hidden" name="students[${i}][childName]" value="${XlsxPersons[i].childName || ''}">
                    <input type="hidden" name="students[${i}][wechat]" value="${XlsxPersons[i].wechat}">
                    <input type="hidden" name="students[${i}][phone]" value="${XlsxPersons[i].phone}">
                    <input type="hidden" name="students[${i}][gradation]" value="${XlsxPersons[i].gradation || ''}">
                    <th scope="row">${XlsxPersons[i].index}</th>
                    <td>${XlsxPersons[i].childName || '-'}</td>
                    <td>${XlsxPersons[i].wechat}</td>
                    <td>${XlsxPersons[i].phone}</td>
                    <td>${XlsxPersons[i].gradation || '-'}</td>
                </tr>`)
                }
            };
            // 以二进制方式打开文件
            fileReader.readAsBinaryString(file);
        });

        input.click()
    }
</script>
{/block}
